<template>
  <div id="cards">
    <div
      v-for="(card) in cards"
      :key="card.title"
      class="card-item"
    >
      <div class="card-header">
        <div class="card-header-left">{{ card.title }}</div>
      </div>
      <VEcharts
        autoresize
        :options="card.optsLeft"
        class="chartClass"
      />

    </div>
  </div>
</template>

<script>
import { commonMethod } from '@/api/mapper/index.js';
import VEcharts from '@/components/vecharts';
export default {
  name: 'Cards',
  components: {
    VEcharts
  },
  data() {
    return {
      cards: [],
      optsLeft: {

      }
    };
  },
  mounted() {
    const { createData } = this;
    setTimeout(() => {
      createData();
    }, 1500);

    setInterval(this.createData, 30000);
  },
  methods: {
    randomExtend(minNum, maxNum) {
      if (arguments.length === 1) {
        return parseInt(Math.random() * minNum + 1, 10);
      } else {
        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
      }
    },
    async createData() {
      const list = [
        {
          name: '各区县申报项目数量'
        },
        {
          name: '各区县立项批复项目数量'
        },
        {
          name: '各区县已开工项目数量'
        },
        {
          name: '各区县评估结果统计'
        }
      ];

      await commonMethod({
        filterList: [],
        pageIndex: 0,
        pageSize: 100,
        pageType: 1,
        tableId: 486
      }).then(res => {
        const nameList = [];
        const numlist = [];
        res.data.map(o => {
          nameList.push(o.NAME);
          numlist.push(o.NUM);
        });
        list[0].optsLeft = {
          grid: {
            top: '5%',
            left: '10%',
            bottom: '25%'
          },
          xAxis: [
            {
              type: 'category',
              data: nameList,
              axisLabel: {
                textStyle: {
                  color: '#878787'// 坐标值得具体的颜色
                },
                rotate: '45'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                textStyle: {
                  color: '#878787' // 坐标值得具体的颜色
                }
              }
            }
          ],
          series: [
            {
              name: '支出',
              type: 'bar',
              data: numlist,
              barWidth: 10,
              itemStyle: {
                normal: {
                // 这里是重点
                  color: function(params) {
                    var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622'];
                    return colorList[params.dataIndex];
                  }
                }
              },
              markLine: {
                data: [
                  { type: 'average', name: '平均值' }
                ]
              }
            }

          ]
        };
        console.log(list[0].optsLeft);
      });
      await commonMethod({
        filterList: [],
        pageIndex: 0,
        pageSize: 100,
        pageType: 1,
        tableId: 487
      }).then(res => {
        const nameList = [];
        const numlist = [];
        res.data.map(o => {
          nameList.push(o.NAME);
          numlist.push(o.NUM);
        });
        list[1].optsLeft = {
          grid: {
            top: '5%',
            left: '10%',
            bottom: '25%'
          },
          xAxis: [
            {
              type: 'category',
              data: nameList,
              axisLabel: {
                textStyle: {
                  color: '#878787'// 坐标值得具体的颜色
                },
                rotate: '45'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                textStyle: {
                  color: '#878787' // 坐标值得具体的颜色
                }
              }
            }
          ],
          series: [
            {
              name: '支出',
              type: 'bar',
              data: numlist,
              barWidth: 10,
              itemStyle: {
                normal: {
                // 这里是重点
                  color: function(params) {
                    var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622'];
                    return colorList[params.dataIndex];
                  }
                }
              },
              markLine: {
                data: [
                  { type: 'average', name: '平均值' }
                ]
              }
            }

          ]
        };
      });
      await commonMethod({
        filterList: [],
        pageIndex: 0,
        pageSize: 100,
        pageType: 1,
        tableId: 488
      }).then(res => {
        const nameList = [];
        const numlist = [];
        res.data.map(o => {
          nameList.push(o.NAME);
          numlist.push(o.NUM);
        });
        list[2].optsLeft = {
          grid: {
            top: '5%',
            left: '10%',
            bottom: '25%'
          },
          xAxis: [
            {
              type: 'category',
              data: nameList,
              axisLabel: {
                textStyle: {
                  color: '#878787'// 坐标值得具体的颜色
                },
                rotate: '45'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                textStyle: {
                  color: '#878787' // 坐标值得具体的颜色
                }
              }
            }
          ],
          series: [
            {
              name: '支出',
              type: 'bar',
              data: numlist,
              barWidth: 10,
              itemStyle: {
                normal: {
                // 这里是重点
                  color: function(params) {
                    var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622'];
                    return colorList[params.dataIndex];
                  }
                }
              },
              markLine: {
                data: [
                  { type: 'average', name: '平均值' }
                ]
              }
            }

          ]
        };
      });
      await commonMethod({
        filterList: [],
        pageIndex: 0,
        pageSize: 100,
        pageType: 1,
        tableId: 489
      }).then(res => {
        const nameList = [];
        const numlist = [];
        res.data.map(o => {
          nameList.push(o.NAME);
          numlist.push(o.NUM);
        });
        list[3].optsLeft = {
          grid: {
            top: '5%',
            left: '10%',
            bottom: '25%'
          },
          xAxis: [
            {
              type: 'category',
              data: nameList,
              axisLabel: {
                textStyle: {
                  color: '#878787'// 坐标值得具体的颜色
                },
                rotate: '45'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                textStyle: {
                  color: '#878787' // 坐标值得具体的颜色
                }
              }
            }
          ],
          series: [
            {
              name: '支出',
              type: 'bar',
              data: numlist,
              barWidth: 10,
              itemStyle: {
                normal: {
                // 这里是重点
                  color: function(params) {
                    var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622'];
                    return colorList[params.dataIndex];
                  }
                }
              },
              markLine: {
                data: [
                  { type: 'average', name: '平均值' }
                ]
              }
            }

          ]
        };
      });

      this.cards = list.map((foo, i) => ({
        title: foo.name,
        optsLeft: foo.optsLeft
      }));
    }

  }
};
</script>

<style lang="scss" scoped>

@media screen and (max-width: 1500px) {
    .chartClass{
        width: 100%;
        height:200px
    }
}
@media (min-width: 1500px){
  .chartClass{
  width: 100%;
  height:250px
  }
}
#cards {
  display: flex;
  justify-content: space-between;
  height: 80%;

  .card-item {
    background-color: rgba(6, 30, 93, 0.5);
    border-top: 2px solid rgba(1, 153, 209, .5);
    width: 24%;
    display: flex;
    flex-direction: column;
  }

  .card-header {
    height: 20%;
    align-items: center;
    justify-content: space-between;

    .card-header-left {
      font-size: 18px;
      font-weight: bold;
      width: 100%;
      text-align: center;
    }

    .card-header-right {
      padding-right: 20px;
      font-size: 40px;
      color: #03d3ec;
    }
  }

  .ring-charts {
    height: 55%;
  }

  .card-footer {
    height: 25%;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .card-footer-item {
    padding: 5px 10px 0px 10px;
    box-sizing: border-box;
    width: 40%;
    background-color: rgba(6, 30, 93, 0.7);
    border-radius: 3px;

    .footer-title {
      font-size: 15px;
      margin-bottom: 5px;
    }

    .footer-detail {
      font-size: 20px;
      color: #1294fb;
      display: flex;
      font-size: 18px;
      align-items: center;

      .dv-digital-flop {
        margin-right: 5px;
      }
    }
  }
}
</style>
